<template>
  <div style="background-color: lavenderblush;display: flex;min-height: 100vh;min-width: 100vw">
    <div style="flex: 1">
      <el-affix :offset="8">
      <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          v-bind:default-active="currentIndex"
          :router=true
          text-color="#fff"
          @select="handleSelect"
          style="min-width: 13vw;min-height:97.5vh"

      >

        <el-menu-item index="1" route="/admin/administration"  style="max-width: 13vw;">
          <el-icon><Postcard /></el-icon>
          <span>个人管理</span>
        </el-menu-item>
        <el-menu-item index="2" route="/admin/essay"  style="max-width: 13vw;">
          <el-icon><Document /></el-icon>
          <span>文章管理</span>
        </el-menu-item>
        <el-menu-item index="3" route="/admin/draft" style="max-width: 13vw;">
          <el-icon><Notebook /></el-icon>
          <span>草稿管理</span>
        </el-menu-item>
        <el-menu-item index="4" route="/admin/category" style="max-width: 13vw;">
          <el-icon><Grid /></el-icon>
          <span>分类管理</span>
        </el-menu-item>
        <el-menu-item index="5"  style="max-width: 13vw;">
          <el-icon><ChatDotSquare /></el-icon>
          <span>评论管理</span>
        </el-menu-item>
        <el-menu-item index="6"  style="max-width: 13vw;">
          <el-icon><Delete /></el-icon>
          <span>回收站</span>
        </el-menu-item>
        <el-menu-item index="7"  style="max-width: 13vw;">
          <el-icon><Setting /></el-icon>
          <span>设置</span>
        </el-menu-item>
      </el-menu>
      </el-affix>
    </div>


    <div style="margin-right: 1.2vw;flex:6.5;height: 97.6vh;width:88vw; ">
<!--      <el-affix :offset="1">-->
      <div style="margin-top: 9px; gap: 10px;height: 50px; line-height: 50px;box-shadow:1px 1px 2px #a6a6a6; display: flex;background-color: white">
        <div style="flex: 1">
          <el-button link v-if="isReturn" @click="back">
            <el-icon><ArrowLeft /></el-icon>返回
          </el-button>
        </div>
        <div style="flex: 13"/>
        <div style="flex: 1">
          <el-button  text bg @click="flushDB">
            <el-icon><Brush /></el-icon> 清理缓存
          </el-button>
        </div>
        <div style="flex: 1">
          <el-button type='danger' text bg @click="showModal">
              <el-icon><SwitchButton /></el-icon> 注销
            </el-button>
          <a-modal v-model:visible="visible" title="注销" @ok="handleOk">
            <p>确认注销吗？</p>
          </a-modal>
        </div>
      </div>
<!--        </el-affix>-->
      <div style="margin: auto">
        <router-view/>
      </div>

    </div>
  </div>

</template>


<script setup>

import {
  Postcard,
  Document,
  Notebook,
  Grid,
  SwitchButton,
  Brush,
  ArrowLeft,
  ChatDotSquare,
  Delete,
  Setting
} from '@element-plus/icons-vue'
import {onMounted, ref, watch} from "vue";
import Cookies from 'js-cookie'
import {useRouter} from "vue-router/dist/vue-router.mjs";
import {useStore} from "vuex";
import request from "@/utils/request";
import { message } from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

const router = useRouter()
const store = useStore()
let currentIndex=ref(store.getters.getCurrentIndex)

const handleSelect = (index,indexPath,item) => {
  console.log(item.index)
  store.commit('setCurrentIndex',item.index)
}



const isReturn=ref(false)
const rePath=ref()
onMounted(()=>{
  isReturn.value=store.getters.getIsReturn.isRe
  rePath.value=store.getters.getIsReturn.rePath
})
const back=()=>{
  store.commit("setIsReturn",{isReturn:false,rePath:''})
  router.push(rePath.value)
}
watch(()=>store.getters.getIsReturn,nowValue=>{
  console.log("watch:",nowValue)
  isReturn.value=nowValue.isRe
  rePath.value=nowValue.rePath
},{ deep: true })





const visible = ref(false);
const showModal = () => {
  visible.value = true;
};

const handleOk = e => {
  console.log(e);
  Cookies.remove('blog-login-in-free')
  sessionStorage.removeItem('blog-token')
  localStorage.removeItem('blog-token')
  router.push({name:'login'})
  visible.value = false;

};

const flushDB=()=>{
  request.get("admin/update/redis/flushDB").then(res=>{
    console.log(res)
    message.success('缓存清理'+res.message)
  })
}
</script>

